window.onload = function () {
    const app = Vue.createApp({
        data(){
            return {
                books:[],
                numOfBuy:[],
                receiverId : 1,
                total : 0.0,
                isShow : false
            }
        },
        methods:{
            logout(){
                const xhr = new XMLHttpRequest();
                xhr.open("GET", "http://localhost:8080/LogOutServlet");
                xhr.send();
                window.location.href="login.html";
            },
            createAndSubmitOrder(){
                // const xhr = new XMLHttpRequest();
                // xhr.open("GET", "http://localhost:8080/GetAllReceiverServlet");
                // xhr.send();
                // xhr.onreadystatechange = function () {
                //     if (xhr.readyState === 4) {
                //         if (xhr.status >= 200 && xhr.status < 300) {
                //             this.receiverId = JSON.parse(xhr.response)[0].receiverId;
                //         } else {
                //             console.log("出现错误");
                //         }
                //     }
                // }
                app.isShow = true;
                function sleep(ms) {
                    return new Promise(resolve =>
                        setTimeout(resolve, ms)
                    )
                }
                sleep(100).then(()=>{
                    //code
                    this.addItem();
                    this.submitOrder();
                    app.isShow = false;
                    alert("订单提交成功");
                    window.location.href = "index.html";
                })

            },
            createOrder(){
                const xhr = new XMLHttpRequest();
                xhr.open("POST", "http://localhost:8080/CreateOrderServlet?receiver=" + this.receiverId,false);
                xhr.send();
            },
            addItem(){
                for (let i = 0; i < this.numOfBuy.length; i++) {
                    if(this.numOfBuy[i]!==0){
                        const xhr = new XMLHttpRequest();
                        xhr.open("GET", "http://localhost:8080/AddItemServlet?bookId="+
                            this.books[i].bookId +"&amount="+this.numOfBuy[i]+"&discount=0.95",false);
                        xhr.send();
                    }
                }
            },
            submitOrder(){
                const xhr = new XMLHttpRequest();
                xhr.open("GET", "http://localhost:8080/SubmitOrderServlet",false);
                xhr.send();
            },
            updateTotal(){
                this.total = 0;
                for(let i = 0; i < this.books.length; i++){
                    this.total += this.books[i]['price'] * this.numOfBuy[i];
                }
            }
        },
        //利用生命周期钩子函数请求服务器端的数据(ajax)
        created(){
            const xhr = new XMLHttpRequest();
            xhr.open("POST", "http://localhost:8080/LogInServlet");
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        if(xhr.response === 'false'){
                            window.location.href="login.html";
                            return;
                        }
                    }
                }
            }
            xhr.open("GET", "http://localhost:8080/GetAllBookServlet");
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        app.books = JSON.parse(xhr.response);
                        app.numOfBuy = new Array(app.books.length).fill(0);
                    } else {
                        console.log("出现错误");
                    }
                }
            }
            this.createOrder();
        },
    }).mount("#app");
}